<template>
  <view class="myApplication">
    <view class="header">
      <slide-nav-tab-bar @clickitem="clickitem" :actindex="activeitemindex" activeColor="#0091ff!important"
        activeBorder="#0091ff" width="130rpx" :list="typeList" ></slide-nav-tab-bar>
		<view class="headerBox">
			<scroll-view scroll-x="true" :enhanced="true" :show-scrollbar="false">
				<view class="approveStatus">
				<view v-for="(item, index) in statusList" :key="index"
					:class="[statusActive === index ? 'apptop active' : 'apptop']" @click="changeStatus(index)">{{ item }}
					<view class="badge" v-if="item ==='待处理' && activeitemindex == 1 && badge != 0">{{ badge }}</view>
				</view>
				</view>
			</scroll-view>
			 <view v-if="activeitemID === 2" class="search-actions-wrapper">
				<view class="search-bar">
				<uni-search-bar
					class="uni-search-bar"
					v-model="keyword"
					clearButton="auto"
					cancelButton="none"
					placeholder="请输入配件类型/项目名称/任务ID"
					@blurs="handleSearch"
				/>
				</view>
<!--				<view class="actions"> -->
<!--          <view class="action-item" :class="{ active: isFilterActive }" @click="handleFilter"> -->
<!--            <image v-show="!isFilterActive" -->
<!--              src="@/static/images/index/selectD.png" -->
<!--              class="action-icon" -->
<!--              mode="aspectFit"></image> -->
<!--            <image v-show="isFilterActive" -->
<!--              src="@/static/images/index/selectA.png" -->
<!--              class="action-icon" -->
<!--              mode="aspectFit"></image> -->
<!--            <text>筛选</text> -->
<!--          </view> -->
<!--				</view> -->
			</view>
		</view>
    </view>
    <view class="content">
      <tk-screen-scroll :list="typeList" @getActIdx="getActIdx" :active="activeitemindex">
        <!-- 报障维修列表 -->
        <block v-if="mylist.length > 0 && activeitemID === 1">
          <approveData :listData="mylist" @toPage="toRepairPage"></approveData>
        </block>
        <!-- 配件申请列表start -->
        <view class="" v-if="mylist.length > 0 && activeitemID === 2">
          <partsList :isMy="true" :listData="mylist" :styleSate="true" @toPage="toRepairDetail" />
        </view>

        <view class="emptyData" v-if="mylist.length === 0">暂无数据</view>

        <view v-show="isLoadMore"><uni-load-more :status="loadStatus"></uni-load-more></view>
      </tk-screen-scroll>
    </view>
    <view-top ref="viewTop" :scrollTop="scrollTop" :distance="100"></view-top>
  </view>
</template>

<script>
// import { approveType, approveList } from '@/apis/approve.js';
import { myApplcationList } from '@/apis/myApplication.js';
import { partsNewMyList } from '@/apis/parts.js';
import approveData from '@/components/approve-data/approve-data.vue';
import partsList from '@/components/partsList/partsList.vue';
import SlideNavTabBar from '@/components/nav-box/nav-box.vue';
import UniLoadMore from '@/components/uni-load-more/uni-load-more';
import { mapState } from 'vuex';
import TkScreenScroll from '@/components/tk-screen-scroll/index';
import viewTop from '@/components/viewTop/viewTop.vue';
export default {
	components: {
		SlideNavTabBar,
		UniLoadMore,
		approveData,
		partsList,
		viewTop,
		TkScreenScroll,
	},
	data() {
		return {
			scrollTop: 0,
			// tab栏激活的值
			activeitemindex: 0, 
			typeList: [
				{ name: '维修报障', id: 1 },
				{ name: '配件申请', id: 2 },
			],
			statusList: ['全部', '待处理', '已受理', '未受理', '已撤回'],
			statusColor: ['#F7B500', '#FA6400', '#6DD400', '#999999'],
			// 状态栏激活的值
			statusActive: 0, 
			approveList: [],
			loadStatus: 'loading',
			isLoadMore: false,
			params: {
				current: 1,
				size: 10,
			},
			// 列表
			mylist: [], 
			activeitemID: 1,
			// 待处理数量
			badge: 0,
			// 搜索关键词
			keyword: ''
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShow() {
		if (uni.getStorageSync('elevatorData')) {
			this.getActIdx(0);
			uni.setStorageSync('elevatorData', '');
		} else {
			uni.startPullDownRefresh();
			if (this.activeitemindex == 1) {
				partsNewMyList({current: 1, size: 1, approveStatus:5, submitId: this.userinfo.user_id}).then(res=>{
					if (res.code === 200) {
						this.badge = res.data.total;
						console.log(res.data.total,'列表');
					}
				});
			}
		}
	},
	onLoad(e) {
		if (e.type) {
			this.activeitemindex = e.type;
			if (e.type == 1) {
				this.activeitemID = 2;
			}
		}
		this.mylist = [];
		// this.activeitemindex = 0
		this.statusActive = 0; 
	},
	methods: {
		handleSearch() {
			if (!this.keyword) return;
			uni.pageScrollTo({
				scrollTop: 0,
			});
			this.statusActive = 0;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},
		getActIdx(idx) {
			uni.pageScrollTo({
				scrollTop: 0,
			});
			console.log(idx, '接受值777');
			this.statusActive = 0;
			this.params.current = 1;
			this.mylist = [];
			this.activeitemindex = idx;
			this.activeitemID = this.typeList[idx].id;
			this.initAllList(this.activeitemID);
		},
		// 申请列表
		initAllList(ids) {
			let promise;
			var objs = {
				current: this.params.current,
				size: this.params.size,
			};
			if (ids === 1) {
				// 报障维修列表
				(this.statusList = [
					'全部',
					'待审核',
					'审核通过',
					'审核不通过',
					'已撤回',
				]),
				(objs.listType = 2),
				(objs.approveStatus = this.statusActive);
				if (this.statusActive === 0) {
					delete objs.approveStatus;
				}
				promise = myApplcationList(objs);
			}
			if (ids === 2) {
				objs.submitId = this.userinfo.user_id;
				if (this.keyword) {
					objs.keyword = this.keyword;
				}
				// 配件申请列表
				this.statusList = [
					'全部',
					'审批中',
					'待处理',
					'审批通过',
					'审批不通过',
					'已撤回',
				];
				if (this.statusActive != 0) {
					// 由于待处理对应后端的退回状态枚举为5，再此处特殊处理
					(objs.approveStatus = (this.statusActive == 2) ? 5 : this.statusActive == 1 ? 1 : this.statusActive - 1 );
				}
				promise = partsNewMyList(objs);
			}
			if (ids || ids === 0) {
				uni.showLoading({
					title: '加载中',
				});
				this.loadStatus = 'loading';
				promise.then((res) => {
					const arr = res.data.records || [];
					if (res.code === 200) {
						if (ids === 2) {
							let auditStatusObj = {
								1: '审批中',
								2: '审批通过',
								3: '审批不通过',
								4: '已撤回',
								5: '已退回',
							};
							for (let i = 0;i < arr.length;i++) {
								arr[i].num = arr[i].partsNum ? arr[i].partsNum : '';
								arr[i].auditStatusName = auditStatusObj[arr[i].approveStatus];
								if (ids === 2 && arr[i].skuPartsInfo) {
									let skuPartsInfo = arr[i].skuPartsInfo;
									if (arr[i].skuPartsInfo && !Array.isArray(arr[i].skuPartsInfo) && arr[i].skuPartsInfo.skuItemList) {
										skuPartsInfo = arr[i].skuPartsInfo.skuItemList;
									} else {
										arr[i].skuPartsInfo = [];
									}
									let skuPartsInfoArr = [];
									if (Array.isArray(skuPartsInfo)) {
										skuPartsInfo.forEach(v=>{
											if (v.label !== '配件名称') {
												skuPartsInfoArr.push(`${v.label}:${v.value}${v.unitName ? `(${v.unitName})` : ''}`);
											} else {
												arr[i].categoryInfo = v.value;
											}
										});
										arr[i].partsModel = skuPartsInfoArr.join('；');
									}
								}
							}
						}
						this.mylist = this.mylist.concat(arr);
						if (arr.length < this.params.size) {
							this.isLoadMore = true;
							this.loadStatus = 'noMore';
						} else {
							this.isLoadMore = false;
						}

						if (this.params.current === 1) {
							// 第一页不显示更多文字
							this.isLoadMore = false;
						} else {
							if (arr.length > this.params.size) {
								this.isLoadMore = true;
							}
						}

						objs = {
							current: this.params.current,
							size: this.params.size,
						};
						uni.hideLoading();
					}
				});
			}
		},

		onReachBottom() {
			console.log('下拉加载', this.params.current);
			if (!this.isLoadMore) {
				// 此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.params.current += 1;
				console.log(this.params.current);
				this.initAllList(this.activeitemID);
			}
		},
		onPullDownRefresh() {
			this.hanleRefresh();
			setTimeout(function () {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh(); 
			}, 1000);
		},
		// 点击重新加载列表
		hanleRefresh() {
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},

		clickitem(res) {
			console.log(res);
			uni.pageScrollTo({
				scrollTop: 0,
			});
			this.activeitemindex = res.idx;
			this.statusActive = 0;
			this.activeitemID = res.val.id;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
			if (res.idx == 1) {
				partsNewMyList({current: 1, size: 1, approveStatus:5, submitId: this.userinfo.user_id}).then(res=>{
					if (res.code === 200) {
						this.badge = res.data.total;
						console.log(res.data.total,'列表');
					}
				});
			}
		},
		// 点击类型搜索
		changeStatus(idx) {
			this.statusActive = idx;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},
		// 维修详情页面
		toRepairPage(obj) {
			uni.navigateTo({
				url:
          '/subpages/approve/repairDetail?planId=' +
          obj.planId +
          '&elevatorId=' +
          obj.elevatorId +
          '&businessApproveId=' +
          obj.businessApproveId +
          '&myApply=' +
          1,
			});
		},
		// 配件申请
		toRepairDetail(obj) {
			uni.navigateTo({
				url: '/subpages/approve/partApprovalDetail?type=3&id=' + obj.planId,
			});
		},
	},
};
</script>
<style>
page {
  background: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.myApplication {
  .header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 300;

	.headerBox {
		margin-left: 20rpx;
		background: #f3f6f8;
	}
		.search-actions-wrapper {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			padding: 16rpx 20rpx;
			margin-bottom: 20rpx;
	
			.search-bar {
				flex: 1;
				margin-right: 16rpx;
	
				.uni-search-bar {
					padding: 0;
	
					/deep/ .uni-searchbar {
						padding: 0;
					}
	
					/deep/ .uni-searchbar__box {
						height: 64rpx;
						background-color: #f6f6f6 !important;
						border-radius: 32rpx;
						border: 0;
					}
	
					/deep/ .uni-searchbar__text-placeholder {
						font-size: 26rpx;
						color: #999;
					}
	
					/deep/ .uni-input-input {
						font-size: 26rpx;
					}
				}
			}
	
			.actions {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 26rpx;
	
				.action-item {
					display: flex;
					align-items: center;
					margin-left: 24rpx;
	
					.action-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 4rpx;
					}
	
					uni-icons {
						margin-right: 4rpx;
					}
	
					&.active {
						text {
							color: #0091FF;
						}
					}
				}
			}
		}
  }

  .content {
    padding: 0 20rpx;
    min-height: 800rpx;

    .myContent {
      background: #ffffff;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .myL {
        flex: 1;

        .myL_title {
          text:nth-of-type(1) {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            display: inline-block;

            .tit_rep {
              margin-left: 10rpx;
              background: #0091ff;
              border-radius: 4rpx;
              font-size: 20rpx;
              font-weight: 400;
              color: #ffffff;
              padding: 0 5rpx;
            }
          }
        }

        .myL_Time {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin-bottom: 15rpx;
        }

        .myL_reptit {
          min-height: 40rpx;
          display: flex;
          flex-direction: row;

          view:nth-of-type(1) {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            width: 115rpx;
          }

          .myL_state {
            border: 2rpx solid #0091ff;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #0091ff;
            padding: 0 15rpx;
          }
        }

        .myL_tit {
          min-height: 40rpx;
          display: flex;
          flex-direction: row;

          view:nth-of-type(1) {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            width: 115rpx;
          }

          view:nth-of-type(2) {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            width: 320rpx;
          }
        }
      }

      .myR {
        flex: 0 0 200rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .myR_state {
          text:nth-of-type(1) {
            font-size: 24rpx;
            font-weight: 400;
            color: #fa6400;
            display: inline-block;
            margin-right: 5rpx;
          }

          text:nth-of-type(2) {
            display: inline-block;
            width: 12rpx;
            height: 12rpx;
            border-right: 2rpx #fa6400 solid;
            border-top: 2rpx #fa6400 solid;
            transform: rotate(45deg);
          }
        }
      }
    }
  }

  .approveStatus {
    // height: 88rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    // overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    position: relative;

    .statebg {
      position: fixed;
      right: 0rpx;
      top: 70rpx;
      width: 64rpx;
      height: 80rpx;
      background: linear-gradient(90deg, rgba(243, 246, 248, 0), #f3f6f8);
    }

    .apptop {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      padding: 6rpx 20rpx;
      color: #0091ff;
      margin-right: 15rpx;
      border-radius: 26rpx;
      background-color: #dcf0ff;
    }

    .active {
      color: #fff;
      background-color: #0091ff;
    }
  }

  .emptyData {
    margin: 20rpx auto;
    width: 680rpx;
    text-align: center;
    color: #999999;
  }
}
.badge{
  width: 30rpx;
  height: 30rpx;
  background: #e02020;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: #fff;
  margin-left: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.search-actions-wrapper .search-bar{
  margin-right: 0 !important;
}
.search-actions-wrapper{
  margin-right: 20rpx;
}
.search-actions-wrapper{
  border-radius: 8rpx;
}
</style>
